import React from 'react';

interface Props {
	/** 自定义样式类 */
	className: string;
	/** 点击事件回调函数 */
	onClick?: React.ComponentProps<'button'>['onClick'];
	/** 是否固定状态 */
	pin?: boolean;
}

/**
 * PinToggler 组件用于切换固定状态
 * @param {string} className - 自定义样式类
 * @param {function} onClick - 点击事件回调函数
 * @param {boolean} pin - 是否固定状态
 * @returns {JSX.Element} - 返回一个 ButtonIcon 组件
 */
const PinToggler = ({ className, onClick, pin }: Props) => {
	// 根据 pin 状态选择图标
	const icon = pin ? 'mdi-pin-off' : 'mdi-pin';
	return (
		<ButtonIcon
			triggerParent
			className={className}
			tooltipContent={pin ? '取消固定' : '固定'}
			tooltipPlacement="bottomLeft"
			onClick={onClick}
		>
			<SvgIcon icon={icon} />
		</ButtonIcon>
	);
};

export default PinToggler;

// 示例用法
// import PinToggler from './PinToggler';
// <PinToggler className="custom-class" onClick={handleClick} pin={true} />
